form表单提交的几种方法

您所在的位置:网站首页 javascript 提交表单 form表单提交的几种方法

form表单提交的几种方法

2023-08-28 22:08| 来源: 网络整理| 查看: 265

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交

当点击登陆时,向数据库发生的数据是:username=username&password=password.

这种默认的提交方式,一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的,希望提交成功则关闭弹出框并刷选父页面,失败则提示失败原因,且弹出框不关闭。此时可以采用Ajax进行数据提交.

具体参考第四种方案

无刷新页面提交表单

表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面

? 1 2 3 4    通过type=submit提交

一般表单提交通过type=submit实现,input type=”submit”,浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url.do

? 1 2 3 4         js提交form表单

js事件触发表单提交,通过button、链接等触发事件,js调用submit()方法提交表单数据,jquery通过submit()方法

? 1 2 3 4 5 6 7 8 9 10       document.getElementById("form").submit();   jquery: $("#form").submit();   ajax异步提交表单数据

采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等

? 1 2 3 4 5 6 7 8 9 10 11 12       var params = {"name", $("#name").val()}  $.ajax({       type: "POST",       url: "/url.do",       data: params,       dataType : "json",       success: function(respMsg){       }    });

此时可以在callback函数中对请求结果进行判断,然后执行不同的动作(页面跳转或刷选数据、提醒错误都可以)

页面无跳转

如果通过form表单提交请求服务端去下载文件,这时当前页面不会发生跳转,服务端返回void,通过response 去写文件数据,页面会显示下载文件。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26           @RequestMapping(value = "/url")     public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)             throws Exception {         OutputStream out = null;         try {             String rptName = "file";             String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),                     "8859_1");             response.reset();             response.setContentType("application/octec-stream");             response.setHeader("Content-disposition", "attachment; filename=" + fileName);             out = response.getOutputStream();             excelAble.exportFile(out);         } catch (Exception e) {             logger.error(e);         } finally {             if (out != null) {                 out.close();             }         }     } form表单上传文件

使用form表单进行上传文件需要为form添加enctype=”multipart/form-data” 属性,除此之外还需要将表单的提交方法改成post,如下 method=”post”, input type的类型需要设置为file

? 1 2 3 4             

附件只能通过submit方法进行提交,



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3